<template>
    <!-- menu菜单 -->
   <div class="header">
    <div class="l-content">
        <!-- 小图标 -->
        <el-button size="small" @click="handleCollapse">
            <component class="icons" is="menu"></component>
        </el-button>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/" class="bread">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="current" :to="current.path" >{{ current.label}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    
    <div class="r-content">
        <el-dropdown>
            <span class="el-dropdown-link">
                <img :src="getImageUrl('user')" class="user"/>
            <el-icon class="el-icon--right">
                <arrow-down />
            </el-icon>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item @click="handleLoginOut">退出</el-dropdown-item>
            </el-dropdown-menu>
    </template>
  </el-dropdown>
    </div>
   </div>
</template>


<script setup>
// 引入stores
import { useAllDataStore } from "@/stores";
import { ref,computed } from 'vue';
import { useRouter } from 'vue-router';

const getImageUrl=(user)=>{ 
    return new URL(`../assets/images/${user}.png`,import.meta.url).href// 图片路径,import.meta.url表示备选
   
};

const stores=useAllDataStore();
const router=useRouter();
const handleLoginOut=()=>{
    stores.clean(router)
    router.push('./login')
}
const handleCollapse=()=>{
    stores.state.isCollapse = !stores.state.isCollapse;
}
const current =computed(()=>stores.state.currentMenu)
</script>



<style lang="less" scoped>
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:100%;
    background-color:#333;
}
.icons{
    width:20px;
    height:20px;

}

.l-content{
    display:flex;
    align-items:center;
    .el-button{
        margin-right:20px;
    }
}
.r-content{
    .user{
        width:40px;
        height:40px;
        border-radius:50%;
    }
}
:deep(.bread span){
    color:#fff !important;
    cursor:pointer !important;
}
</style>

